<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./category.css" />
</head>

<body>
	<div class="container">
		<ul class="top"></ul>
	</div>
	<script>
		async function getCategory() {
			const topResponse = await fetch(
				"http://ajax-api.itheima.net/api/category/top"
			);
			const topResult = await topResponse.json();
			console.log(topResult)
			const list = topResult.data;
			const subPromiseArr = list.map((item) => {
				return fetch(
					`http://ajax-api.itheima.net/api/category/sub?id=${item.id}`
				).then((res) => res.json());
			});
			const subResultList = await Promise.all(subPromiseArr);
			console.log(subResultList)
			// 数据加载完毕渲染
			const html = subResultList.map((item, i) => {
				// 子分类列表
				const subLis = item.data.children
					.map(
						(sub) => `
							<li>
								<a href="javascript:;">
								<span>${sub.name}</span>
								<img src="${sub.picture}" alt="">
								</a>
							</li>
						`
					)
					.join("");
				// 父分类列表
				return `
					<li>
						<a href="javascript:;">${item.data.name}</a>
						<ul class="sub">${subLis}</ul>
					</li>
				`;
			})
				.join("");
			document.querySelector(".top").innerHTML = html;
		}
		getCategory();
	</script>
</body>

</html>